import React from 'react'
import { incre, decre, asyncIncreAction } from '../../app/slices/countSlice';
import { incre as inc, decre as dec } from '../../app/slices/zanSlice';
//selector 选择器   useDispatch 获取 dispatch 的 hook
import {useSelector, useDispatch} from 'react-redux';

export default function ReduxCom() {
  //获取 redux 中的状态
  let count = useSelector(state => state.count);
  let zan = useSelector(state => state.zan);

  // let {zan, count} = useSelector(state => state);
  //获取 dispatch 函数
  let dispatch = useDispatch();

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {
        dispatch(incre(1));
      }}>新增</button>
      <button onClick={() => {
        dispatch(decre(1));
      }}>减少</button>
      <button onClick={() => {
        dispatch(asyncIncreAction(5));
      }}>1秒后新增1</button>

      <h2>{zan.value}</h2>
      <button onClick={() => {
        dispatch(inc(1))
      }}>+</button>
      <button onClick={() => {
        dispatch(dec(1));
      }}>-</button>
    </div>
  )
}
